<template>
  <a-modal
    v-model:open="visible"
    title="活动奖品"
    @ok="handleOk"
    width="1000px"
    @cancel="handleCancel"
    :confirmLoading="confirmLoading"
  >
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="商品库">
        <searchForm @search="handleSearch" @reset="handleReset" />
        <tableData
          :activeid="activeid"
          :tableList="tableList"
          :loading="loading"
          :pagination="pagination"
          @change="changePagination"
          @refresh="getList"
          @handlePushSelectDrawList="
            (item: DrawItem) => {
              getList()
              emit('handlePushSelectDrawList', item)
            }
          "
        />
      </a-tab-pane>
      <a-tab-pane key="2" tab="已选商品" force-render>
        <drawInfoBox :table-list="selectDrawList" />
        <tableInfoDrawData
          :activeid="activeid"
          :table-list="selectDrawList"
          @handleOutSelectDrawList="
            (item: ActivePoolItem) => {
              getList()
              emit('handleOutSelectDrawList', item)
            }
          "
        />
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import tableData, { type DrawItem } from './tableDrawData.vue'
import tableInfoDrawData from './tableInfoDrawData.vue'
import { listDraws } from '@/api/draw.api'
import { message } from 'ant-design-vue'
import searchForm from './editSearchForm.vue'
import drawInfoBox from './drawInfoBox.vue'
import type { ActivePoolItem } from '@/types/active.api'
defineProps<{
  selectDrawList: ActivePoolItem[]
}>()
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
})
const loading = ref(false)
const tableList = ref<DrawItem[]>([])
const activeid = ref('')
const activeKey = ref('1')
const getList = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.value.current,
      size: pagination.value.pageSize,
    }
    const res = await listDraws(params)
    if (res.code === 200 && res.data) {
      pagination.value.total = res.data.total
      tableList.value = res.data.list as unknown as DrawItem[]
    } else {
      message.error(res.message || '获取列表失败')
    }
  } catch (err: unknown) {
    console.error(err)
    message.error('获取列表失败')
  } finally {
    loading.value = false
  }
}
const visible = ref(false)
const confirmLoading = ref(false)

const changePagination = (paginations: { current: number; pageSize: number }) => {
  pagination.value.current = paginations.current
  pagination.value.pageSize = paginations.pageSize
  getList()
}
const handleSearch = () => {
  pagination.value.current = 1
  getList()
}

const handleReset = () => {
  pagination.value.current = 1
  getList()
}
const emit = defineEmits([
  'update',
  'cancel',
  'handlePushSelectDrawList',
  'handleOutSelectDrawList',
])

const handleOk = async () => {}

const handleCancel = () => {
  visible.value = false
  emit('cancel')
}

const open = ({ _id }: { _id: string }) => {
  activeid.value = _id
  visible.value = true
  getList()
}

defineExpose({
  open,
})
</script>
